<script setup>
import { reactive, ref } from "vue";
import {
  Search,
  More,
  Plus,
  ArrowDown,
  Delete,
  Minus,
} from "@element-plus/icons-vue";
import { getProductList, updateProduct, deleteProduct } from "@/api/product";
import { formatTime } from "@/utils/format";

const farmProductsDetail = ref(null);

// 请求参数
const params = reactive({
  current: 1,
  size: 10,
  keyword: "",
});
// 加载
const loading = ref(false);
// 存储数据
const list = ref([]);
// 存储条数
const total = ref(0);

// 获取列表
const getList = async () => {
  loading.value = true;
  const res = await getProductList(params);
  list.value = res.data.data.data;
  total.value = res.data.data.total;
  loading.value = false;
};
getList();

// 搜索
const onSearch = () => {
  params.current = 1;
  getList();
};
// 重置
const restore = () => {
  params.keyword = "";
  getList();
};

// 页数和条数变化
const handleSizeChange = (val) => {
  params.size = val;
  getList();
};
const handleCurrentChange = (val) => {
  params.current = val;
  getList();
};

// 点击商品列表
const handleViewDetail = (row) => {
  farmProductsDetail.value.handleOpen(row, "detail");
};

// 上传农产品
const upload = () => {
  farmProductsDetail.value.handleOpen({}, "add");
};
// 下架
const takeOff = async (row) => {
  await ElMessageBox.confirm("是否下架该农产品", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  });
  await updateProduct({
    productId: row.productId,
    status: 3,
  });
  ElMessage.success("下架成功");
  getList();
};

// 删除
const handleDelete = async (row) => {
  await ElMessageBox.confirm("是否删除该农产品", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  });
  await deleteProduct(row.productId);
  ElMessage.success("删除成功");
  getList();
};

const success = () => {
  getList();
};
</script>
<template>
  <div class="uploadProducts">
    <Card title="农产品信息">
      <template #extra>
        <el-button type="success" plain @click="upload" :icon="Plus"
          >上传农产品</el-button
        >
      </template>
      <el-form inline style="margin-left: 20px">
        <el-form-item style="width: 300px">
          <el-input
            :prefix-icon="Search"
            v-model="params.keyword"
            clearable
            class="w-50"
            placeholder="农产品名称"
            @keyup.enter="onSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="restore">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        style="width: 100%"
        v-loading="loading"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        highlight-current-row
        @row-click="handleViewDetail"
      >
        <el-table-column type="index" label="序列" width="100" align="center" />
        <el-table-column prop="productName" label="产品名称" align="center" />
        <el-table-column prop="price" label="单价" align="center" />
        <el-table-column prop="stock" label="库存" align="center" />
        <el-table-column prop="salesVolume" label="销量" align="center" />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          :filters="[
            { text: '待审核', value: 0 },
            { text: '不通过', value: 1 },
            { text: '上架', value: 2 },
            { text: '下架', value: 3 },
          ]"
          :filter-method="(value, row) => row.status === value"
          filter-placement="bottom-end"
        >
          <template #default="{ row }">
            <el-tag v-if="row.status === 0" type="primary">待审核</el-tag>
            <el-tag v-else-if="row.status === 1" type="warning">不通过</el-tag>
            <el-tag v-else-if="row.status === 2" type="success">上架</el-tag>
            <el-tag v-else-if="row.status === 3" type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="上传时间"
          align="center"
          sortable
        >
          <template #default="{ row }">
            {{ formatTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template #default="{ row }">
            <!-- 下架 -->
            <el-button
              v-if="row.status === 2"
              :icon="Minus"
              circle
              plain
              type="primary"
              @click.stop="takeOff(row)"
            ></el-button>
            <el-button
              v-if="row.status === 1 || row.status === 3"
              :icon="Delete"
              circle
              plain
              type="danger"
              @click.stop="handleDelete(row)"
            ></el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="没有数据" />
        </template>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="params.current"
        v-model:page-size="params.size"
        :page-sizes="[2, 3, 4, 5, 10]"
        background
        layout="jumper,total, sizes, prev, pager, next"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 50px; justify-content: flex-end"
      />
    </Card>
  </div>
  <MyFarmProductsDetail ref="farmProductsDetail" @success="success" />
</template>

<style scoped lang="scss">
.uploadProducts {
  padding: 0 50px; /* 仅保留生效的内边距样式，删除未调用的 width: auto */
}
</style>
